<template>
  <div class="center">
    <my-header
      title="直通率"
      v-bind:showdata="showdata"
      v-bind:showbtn="showbtn"
    />
    <div class="data" id="zhitonglv_main"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import myheader from "./myheader";

export default {
  components: {
    "my-header": myheader,
  },
  name: "zhitonglv",
  data() {
    return {
      showdata: false,
      showbtn: false,
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let chartDom = document.getElementById("zhitonglv_main");
      let myChart = echarts.init(chartDom, "dark");
      let option;

      option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["G5", "HA", "HA2E", "HA2H", "HAD"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["08/20", "08/21", "08/22", "08/23", "08/24"],
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 100,
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value}%",
          },
        },
        series: [
          {
            name: "G5",
            symbolSize: 10, //设定实心点的大小
            type: "line",
            data: [90, 70, 40, 59, 22],
            areaStyle: {},
            smooth: true,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(93, 208, 179, 0.5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(93, 208, 179, 0)",
                    },
                  ],
                  global: false, // 缺省为 false
                },
                lineStyle: {
                  color: "rgba(93, 208, 179)",
                },
                borderColor: "#FFFFFF",
                borderWidth: 1,
              },
            },
          },
          //,
          // {
          //   name: 'HA',
          //   symbolSize: 10, //设定实心点的大小
          //   type: 'line',
          //   data: [15, 30, 20, 10, 10],
          //   areaStyle: {},
          //   smooth: true,
          //   itemStyle: {
          //     normal: {
          //       color: {
          //         type: 'linear',
          //         x: 0,
          //         y: 0,
          //         x2: 0,
          //         y2: 1,
          //         colorStops: [
          //           {
          //             offset: 0,
          //             color: '#ffbd72' // 0% 处的颜色
          //           }
          //         ],
          //         global: false // 缺省为 false
          //       },
          //       borderColor: '#FFFFFF',
          //       borderWidth: 1
          //     }
          //   }
          // }
          // ,
          // {
          //   name: 'HA2E',
          //   symbolSize: 10, //设定实心点的大小
          //   type: 'line',
          //   data: [15, 12, 40, 59, 22],
          //   areaStyle: {},
          //   smooth: true,
          //   itemStyle: {
          //     normal: {
          //       color: {
          //         type: 'linear',
          //         x: 0,
          //         y: 0,
          //         x2: 0,
          //         y2: 1,
          //         colorStops: [
          //           {
          //             offset: 0,
          //             color: '#4478f0' // 0% 处的颜色
          //           }
          //         ],
          //         global: false // 缺省为 false
          //       },
          //       borderColor: '#FFFFFF',
          //       borderWidth: 1
          //     }
          //   }
          // }
          {
            name: "HA2H",
            symbolSize: 10, //设定实心点的大小
            type: "line",
            data: [15, 30, 10, 18, 22],
            areaStyle: {},
            smooth: true,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(149, 121, 255, 0.5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(149, 121, 255, 0)",
                    },
                  ],
                  global: false, // 缺省为 false
                },
                lineStyle: {
                  color: "#9579ff",
                },
                borderColor: "#FFFFFF",
                borderWidth: 1,
              },
            },
          },
          //,
          // {
          //   name: 'HAD',
          //   symbolSize: 10, //设定实心点的大小
          //   type: 'line',
          //   data: [15, 12, 40, 59, 22],
          //   areaStyle: {},
          //   smooth: true,
          //   itemStyle: {
          //     normal: {
          //       color: {
          //         type: 'linear',
          //         x: 0,
          //         y: 0,
          //         x2: 0,
          //         y2: 1,
          //         colorStops: [
          //           {
          //             offset: 0,
          //             color: '#9c9c9c' // 0% 处的颜色
          //           }
          //         ],
          //         global: false // 缺省为 false
          //       },
          //       borderColor: '#FFFFFF',
          //       borderWidth: 1
          //     }
          //   }
          // }
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
<style  scoped>
.center {
  width: 100%;
  height: 100%;
}
.data {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: rgb(10, 19, 43);
  border: 1px solid rgb(85, 125, 219);
}
</style>
